<template>
    <!-- 加载动画 start -->
    <div v-if="loading" id="loading-box">
        <div class="loading-left-bg"></div>
        <div class="loading-right-bg"></div>
        <div class="spinner-box">
            <div class="loader">
                <div class="inner one"></div>
                <div class="inner two"></div>
                <div class="inner three"></div>
            </div>
            <div class="loading-word">
                <span id="loading-text">Loading...</span>
            </div>
        </div>
    </div>
    <!-- 加载动画 end -->

    <el-container v-else class="dashboard">
        <!-- 侧边栏，支持折叠 -->
        <el-aside :width="isCollapse ? '64px' : '200px'" class="variation">
            <!-- 导航栏组件，支持折叠状态同步 -->
            <nav-bar :is-collapse="isCollapse" @update:is-collapse="isCollapse = $event" />
        </el-aside>
        <el-container class="variation">
            <!-- 顶部导航栏 -->
            <el-header class="header collect">
                <Crumbs @getIsCollapse="getIsCollapse"></Crumbs>
            </el-header>
            <!-- 主内容区 -->
            <el-main class="main">
                <el-scrollbar>
                    <Card></Card>
                </el-scrollbar>
            </el-main>
        </el-container>
    </el-container>
</template>

<script setup>
// 引入 Element Plus 布局组件
import { ElContainer, ElHeader, ElAside, ElMain, ElScrollbar } from 'element-plus'
// // 引入自定义组件
import NavBar from '@/components/NavBar.vue'
import Crumbs from '@/components/Crumbs.vue'
import Card from '@/components/Card.vue'

import { ref, onMounted } from 'vue'

// 控制侧边栏折叠状态
const isCollapse = ref(false)

// 自定义事件：获取子组件的 isCollapse 属性，实现父子通信
function getIsCollapse(data) {
    isCollapse.value = data
}

const loading = ref(true)

onMounted(() => {
    // 这里可以替换为真实的资源/数据加载
    setTimeout(() => {
        loading.value = false
    }, 1500)
})
</script>

<style scoped>
/* 主布局样式 */
.dashboard {
    width: 100vw;
    height: 100vh;
}

/* 侧边栏和主内容区宽度过渡动画 */
.variation {
    transition: width 0.5s;
}

/* 顶部导航栏样式 */
.header {
    display: flex;
    align-items: center;
}

/* 顶部导航栏阴影和定位 */
.collect {
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    position: relative;
}

/* 主内容区样式 */
.main {
    padding-left: 0;
    padding-right: 0;
    overflow: auto;
    padding-top: 0.5%;
}

.dashboard-loading {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    color: #409EFF;
}

/* 加载动画样式 */
#loading-box .loading-left-bg,
#loading-box .loading-right-bg {
    position: fixed;
    z-index: 999998;
    width: 50%;
    height: 100%;
    background-color: rgb(81 81 81 / 80%);
    transition: all 0.7s cubic-bezier(0.42, 0, 0, 1.01);
    backdrop-filter: blur(10px);
}

#loading-box .loading-right-bg {
    right: 0;
}

#loading-box>.spinner-box {
    position: fixed;
    z-index: 999999;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
}

#loading-box .spinner-box .loading-word {
    position: absolute;
    color: #ffffff;
    font-size: 0.95rem;
    transform: translateY(64px);
    text-align: center;
}

p.loading-title {
    font-size: 1.25rem;
    margin: 20px 10px 4px 10px;
}

#loading-box .spinner-box .configure-core {
    width: 100%;
    height: 100%;
    background-color: #37474f;
}

div.loaded div.loading-left-bg {
    transform: translate(-100%, 0);
}

div.loaded div.loading-right-bg {
    transform: translate(100%, 0);
}

div.loaded div.spinner-box {
    display: none !important;
}

.loader {
    position: absolute;
    top: calc(50% - 32px);
    left: calc(50% - 32px);
    width: 64px;
    height: 64px;
    border-radius: 50%;
    perspective: 800px;
    transition: all 0.7s cubic-bezier(0.42, 0, 0, 1.01);
}

.inner {
    position: absolute;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.inner.one {
    left: 0%;
    top: 0%;
    animation: rotate-one 1s linear infinite;
    border-bottom: 3px solid #efeffa;
}

.inner.two {
    right: 0%;
    top: 0%;
    animation: rotate-two 1s linear infinite;
    border-right: 3px solid #efeffa;
}

.inner.three {
    right: 0%;
    bottom: 0%;
    animation: rotate-three 1s linear infinite;
    border-top: 3px solid #efeffa;
}

@keyframes rotate-one {
    0% {
        transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
    }

    100% {
        transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
    }
}

@keyframes rotate-two {
    0% {
        transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
    }

    100% {
        transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
    }
}

@keyframes rotate-three {
    0% {
        transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
    }

    100% {
        transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
    }
}
</style>